<template>
	<view class="indexContainer">
		<!--头部区域-->
		<view class="header">
			<image class="logo" src="../../static/logo.png" mode=""></image>
			<view class="search">
				<text class="iconfont icon-sousuotianchong"></text>
				<input type="text" value="" placeholder="请输入搜索内容……" placeholder-class="placeholder"/>
			</view>
			<button type="default">搜索</button>
		</view>
	
		<!--滑块-->
		<scroll-view class="navScroll" scroll-x="true" v-if="indexData.kingKongModule">
			<view class="navItem" :class="{active:navIndex===-1}" @click="changeIndex(-1,-1)">推荐</view>
			<view class="navItem" :class="{active:navIndex===index}" v-for="(item,index) in indexData.kingKongModule.kingKongList" @click="changeIndex(index,item.L1Id)" :key="item.L1Id">
				{{item.text}}
			</view>
		</scroll-view>
		
		<!--内容区-->
		<scroll-view scroll-y="true">
			<!--推荐模块-->
			<Recommend v-if="navIndex===-1"></Recommend>
			<!--分类-->
			<CateList v-else :L1Id='L1Id'></CateList>
		</scroll-view>
	
	</view>
</template>

<script>
	import request from '../../utils/request.js';
	import Recommend from '../../components/Recommend/Recommend.vue'
	import CateList from '../../components/CateList/CateList.vue'
	
	import {mapActions,mapState} from 'vuex';
	export default {
		components:{
			Recommend,
			CateList
		},
		data() {
			return {
				navIndex:-1,	//导航栏标记（点谁谁高亮）
				//indexData:{},	//首页数据
				L1Id:0,			//用于判断首页显示哪个分类内容
			};
		},
		computed: {
			//...mapActions('模块',['数据'])
			//...mapState('home',['indexData'])
			...mapState({
				indexData:state=>state.home.indexData
			})
		},
		onLoad() {

		},
		mounted() {
			//获取仓库里的数据
			console.log(this.$store.state.home.test); 
			//1、触发action:	  this.$store.dispatch('模块名/action名')
			//this.$store.dispatch('home/getIndexDataActions')
			//2、触发action
			this.getIndexDataActions(); 
		},
		methods: {
			...mapActions('home',['getIndexDataActions']),
			//获取首页数据
			async getIndexData(){
				const res=await request('/getIndexData');		//小程序
				//const res=await request('/api/getIndexData');	//H5
				console.log(res);
				this.indexData=res.indexData;
			},
			
			//点击切换下标（用于实现导航栏点击高亮问题）
			changeIndex(index,L1Id){
				this.navIndex=index;
				this.L1Id=L1Id;
			}
		}
	}
</script>

<style lang="stylus">
	.indexContainer
		.header
			display: flex
			padding: 10rpx 5rpx
			.logo
				width: 250rpx
				height: 70rpx
			.search
				width: 420rpx
				height: 70rpx
				background: #f5f5f5
				position: relative
				input
					width: 350rpx
					height: 70rpx
					margin-left: 60rpx
				.placeholder
					font-size: 26rpx
				.iconfont
					position: absolute
					left: 4rpx
					top: 10rpx
				
			button
				width: 144rpx
				height: 70rpx
				line-height: 60rpx
				text-align: center
				font-size: 26rpx
				padding: 0 4rpx
				margin: 0 5rpx
				
		
		
		.navScroll
			//不换行
			white-space: nowrap
			.navItem
				display: inline-block
				height: 40rpx
				padding: 10rpx
				font-size: 26rpx
				&.active
					color: #BB2C08
					border-bottom: 3rpx solid #BB2C08
				
			
		
		.text
			color: red
</style>
		
		
			